How to bind an event with Angular 2 (4, 5, 6, 7) for the cross icon of an <input type="search">? Which event gets triggered?
Looking for a solution like (other than (search) because it does not work in IE):
<input type="search" (click)="search()">
Additional question: What's the official name of this cross icon? Kinda hard googling/duckduckgoing for a solution when not knowing the right terms?
Duplicate Question: How do you detect the clearing of a "search" HTML5 input?
<input type="search" (search)="search()">
There are multiple ways of binding the search event with component
1) Using change event
<input type="search" class="form-control" placeholder="Search" (change)="onSearchCustomer($event)">
// This event get fired when you type something and hit enter, but if you
// again hit enter without adding a new input it won't get fired.
//(i.e It fires only when the content changes and mean while enter is pressed)
2) Using search event
<input type="search" class="form-control" placeholder="Search" (search)="onSearchCustomer($event)">
// This event is fired whenever enter is pressed.(i.e without caring about the change of content)
3) Using keyup event
<input type="search" class="form-control" placeholder="Search" (keyup)="onSearchCustomer($event)">
// This event is fired on every key press
4) Using keyup.enter event
<input type="search" class="form-control" placeholder="Search" (keyup.enter)="onSearchCustomer($event)">
// This event is similar to search event which only fires when enter is pressed
Now in your Component file
onSearchCustomer(event: any) {
console.log(event.target.value);
}
Hope this will help you or somebody else!
<input type="search" placeholder="Search for text" #searchInput (keyup)="search(searchInput.value)" (search)="search()">